<template>
<div style="height:100%;background:#fff ">
    <div style="padding:10px;border-bottom:1px solid #e8eaec;margin-bottom:10px;">
        <b style="font-size:20px">{{formInfo.fromName || '请选择表单'}}</b>
        <br>
        <span class="tips">{{formInfo.updateTime}}</span>
    </div>
    <div style="display:flex;padding:10px;height:calc(100% - 90px);background:#fff">
        <div style="width:20%;height:100%;overflow:auto;">
            <happy-scroll :size="10" resize>
                <div style="padding:5px 15px 5px 10px">
                    <Tabs value="ele">
                        <TabPane label="组件设置" name="ele">
                          <div>
                            <div v-if="eleConfig.config">
                              <div v-if="eleConfig.type === 'input'">
                                <INPUTATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'number'">
                                <NUMBERATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'select'">
                                <SELECTATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'time'">
                                <TIMEATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'date'">
                                <DATEATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'switch'">
                                <SWITCHATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'radio'">
                                <RADIOATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'checkbox'">
                                <CHECKBOXATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'button'">
                                <BTNATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'divider'">
                                <DIVIDERATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'text'">
                                <TEXTATTR :config="eleConfig.config"/>
                              </div>
                              <div v-else-if="eleConfig.type === 'alert'">
                                <ALERTATTR :config="eleConfig.config"/>
                              </div>
                            </div>
                            <div v-else>
                              <b>请在右侧选择组件</b>
                            </div>
                          </div>
                        </TabPane>
                        <TabPane label="表单设置" name="form">
                            <div style="text-align:left">
                                <div>
                                    <b>组件全局大小</b>
                                    <div style="margin-top:10px">
                                        <Select v-model="form.size" style="width:100%" @on-change="formSizeChange">
                                            <Option value="default">默认</Option>
                                            <Option value="large">大尺寸</Option>
                                            <Option value="small">小尺寸</Option>
                                        </Select>
                                    </div>
                                </div>
                                <div style="margin-top:15px">
                                    <b>字段标签位置</b>
                                    <div style="margin-top:10px">
                                        <RadioGroup v-model="form.lablePos" type="button">
                                            <Radio label="left">左边</Radio>
                                            <Radio label="top">顶部</Radio>
                                            <Radio label="right">右边</Radio>
                                        </RadioGroup>
                                    </div>
                                </div>
                                <div style="margin-top:15px">
                                    <b>标签宽度</b>
                                    <div style="margin-top:10px">
                                        <InputNumber v-model="form.labelWidth" style="width:100%" controls-outside/>
                                    </div>
                                </div>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
            </happy-scroll>
        </div>
        <div style="width:2px;background:#e8eaec;margin:0 10px"></div>
        <div style="width:80%;">
            <div style="display:flex;align-items: center;justify-content: space-between;padding:10px 0">
                <div>
                    <a @click="goHome">返回首页</a>
                    <Divider type="vertical" />
                    <a @click="getFormInfo">刷新</a>
                    <Divider type="vertical" />
                    <a @click="ecfield">保存</a>
                </div>
                <div>
                    <a @click="addRow()">新建行</a>
                    <Divider type="vertical"/>
                    <a @click="previewFun()">表单预览</a>
                    <Divider type="vertical" />
                    <a @click="tablePreFun()">表格预览</a>
                    <Divider type="vertical" />
                    <a @click="clearRow()">清空</a>
                    <Divider type="vertical" />
                    <a @click="formDataFun()">表单数据</a>
                    <Divider type="vertical" />
                    <a @click="formAuthFun()">表单验证</a>
                    <!-- <Divider type="vertical" />
                    <a>Service快捷生成</a> -->
                </div>
            </div>
            <happy-scroll :size="10" resize style="background:#e8eaec;height:calc(100% - 30px)">
                <Form ref="eleForm" :model="formField" :rules="formRules" :label-width="form.labelWidth" style="text-align:left"
                :label-position="form.lablePos" :size="form.size">
                    <div style="padding:10px;border:1px solid #dcdee2;background:#fff;width:fit-content;min-width:100%"
                    v-for="(cols, ri) in rows" :key="ri">
                        <div style="display:flex;justify-content: space-between;" class="tips">
                            <a @click="addCol(ri)">在本行新建一列</a>
                            <a @click="delRow(ri)">删除行</a>
                        </div>
                        <div style="display:flex;margin-top:10px" v-if="cols.length > 0">
                            <div v-for="(eles, coli) in cols" :key="coli" :style="colStyle[ri + '-' + coli]"
                            style="width:100%;padding:10px;border:1px solid #dcdee2;margin:0 5px">
                                <div style="display:flex;margin-bottom:10px;justify-content: space-between;" class="tips">
                                    <div>
                                      <a @click="selectEle(ri, coli)">选择组件</a>
                                    </div>
                                    <a @click="delCol(ri, coli)">删除列</a>
                                </div>
                                <div v-if="eles && eles.length > 0">
                                  <Card v-for="(item, i) in eles" :key="i" style="margin-bottom:10px"
                                  @click.native="setUpEle(item, setItemKey(item))"
                                  :style="{border: eleConfig.key === setItemKey(item) ? '1px solid #2d8cf0' :
                                  checkField(fieldNotSetkey, item, false) === 'not' ? '1px solid #ed4014' :
                                  checkField(fieldNotSetkey, item, false) === 'hav' ? '1px solid #ff9900' : '',
                                  boxShadow: eleConfig.key === setItemKey(item) ? '0 0 5px #2d8cf0' : ''}">
                                        <!-- 输入框 -->
                                        <div v-if="item.configKey === 'input'">
                                          <FormItem :prop="item.config.field" :label="item.config.label" style="margin-bottom:0">
                                            <Input v-model="item.config.default" style="width:100%"
                                            :type="item.config.type"
                                            :size="item.config.attr.size" :placeholder="item.config.attr.placeholder"
                                            :clearable="item.config.attr.clearable" :readonly="item.config.attr.readonly"
                                            :maxlength="item.config.attr.maxlength" :rows="item.config.attr.rows"
                                            :autosize="item.config.attr.autosize" show-word-limit/>
                                          </FormItem>
                                        </div>
                                        <!-- number -->
                                        <div v-else-if="item.configKey === 'number'">
                                          <FormItem :prop="item.config.field" :label="item.config.label" style="margin-bottom:0">
                                            <InputNumber v-model="item.config.default" style="width:100%"
                                            :max="item.config.attr.max" :min="item.config.attr.min" :controls-outside="item.config.attr.controlsOutside"
                                            :step="item.config.attr.step" :size="item.config.attr.size" :placeholder="item.config.attr.placeholder"
                                            :readonly="item.config.attr.readonly" :precision="item.config.attr.precision" :editable="item.config.attr.editable"
                                            />
                                          </FormItem>
                                        </div>
                                        <!-- select -->
                                        <div v-else-if="item.configKey === 'select'">
                                          <FormItem :prop="item.config.field" :label="item.config.label" style="margin-bottom:0">
                                            <Select v-model="item.config.default"
                                            :size="item.config.attr.size"  :disabled="item.config.attr.disabled"
                                            :multiple="item.config.attr.multiple" :clearable="item.config.attr.clearable"
                                            :placeholder="item.config.attr.placeholder" :filterable="item.config.attr.filterable"
                                            :allow-create="item.config.attr.allowCreate" transfer>
                                                <Option v-for="(item, i) in item.config.option" :key="i" :value="item.value">{{item.label}}</Option>
                                            </Select>
                                          </FormItem>
                                        </div>
                                        <!-- time -->
                                        <div v-else-if="item.configKey === 'time'">
                                          <FormItem :prop="item.config.field" :label="item.config.label" style="margin-bottom:0">
                                            <TimePicker style="width:100%" v-model="item.config.default"
                                            :type="item.config.type" :format="item.config.attr.format"
                                            :placeholder="item.config.attr.placeholder" :size="item.config.attr.size"
                                            :clearable="item.config.attr.clearable" :readonly="item.config.attr.readonly"
                                            :editable="item.config.attr.editable" transfer/>
                                          </FormItem>
                                        </div>
                                        <!-- date -->
                                        <div v-else-if="item.configKey === 'date'">
                                          <FormItem :prop="item.config.field" :label="item.config.label" style="margin-bottom:0">
                                            <DatePicker style="width:100%" v-model="item.config.default"
                                            :type="item.config.type" :format="item.config.attr.format"
                                            :placeholder="item.config.attr.placeholder" :size="item.config.attr.size"
                                            :clearable="item.config.attr.clearable" :readonly="item.config.attr.readonly"
                                            :editable="item.config.attr.editable" transfer/>
                                          </FormItem>
                                        </div>
                                        <!-- switch -->
                                        <div v-else-if="item.configKey === 'switch'">
                                          <FormItem :prop="item.config.field" :label="item.config.label" style="margin-bottom:0">
                                            <SwitchIview v-model="item.config.default"
                                            :size="item.config.attr.size" :disabled="item.config.attr.disabled"
                                            :true-value="item.config.attr.trueVal" :false-value="item.config.attr.falseVal"
                                            :true-color="item.config.attr.trueColor" :false-color="item.config.attr.falseColor"/>
                                          </FormItem>
                                        </div>
                                        <!-- radio -->
                                        <div v-else-if="item.configKey === 'radio'">
                                          <FormItem :prop="item.config.field" :label="item.config.label" style="margin-bottom:0">
                                            <div v-if="item.config.option.length > 0">
                                                <RadioGroup v-model="item.config.default" button-style="solid"
                                                :vertical="item.config.attr.vertical" :size="item.config.attr.size"
                                                :type="item.config.attr.type"
                                                >
                                                    <Radio v-for="(itemX, i) in item.config.option" :border="item.config.attr.border"
                                                    :key="i" :label="itemX.value">{{itemX.label}}</Radio>
                                                </RadioGroup>
                                            </div>
                                            <div v-else>暂未添加选项,请在组件设置中添加</div>
                                          </FormItem>
                                        </div>
                                        <!-- checkbox -->
                                        <div v-else-if="item.configKey === 'checkbox'">
                                          <FormItem :prop="item.config.field" :label="item.config.label" style="margin-bottom:0">
                                            <div v-if="item.config.option.length > 0">
                                                    <CheckboxGroup  v-model="item.config.default"
                                                    :size="item.config.attr.size"
                                                >
                                                    <Checkbox v-for="(itemX, i) in item.config.option"
                                                    :border="item.config.attr.border"
                                                    :key="i" :label="itemX.value">{{itemX.label}}</Checkbox>
                                                </CheckboxGroup >
                                            </div>
                                            <div v-else>暂未添加选项,请在组件设置中添加</div>
                                          </FormItem>
                                        </div>
                                        <!-- button -->
                                        <div v-else-if="item.configKey === 'button'">
                                          <Button :size="item.config.attr.size" :type="item.config.attr.type"
                                          :ghost="item.config.attr.ghost" :long="item.config.attr.long"
                                          :disabled="item.config.attr.disabled" @click.stop="doFun(item.config.click, formField)">{{item.config.text}}</Button>
                                        </div>
                                        <!-- Divider -->
                                        <div v-else-if="item.configKey === 'divider'">
                                          <Divider :type="item.config.attr.type"
                                          :orientation="item.config.attr.orientation"
                                          :dashed="item.config.attr.dashed"
                                          :plain="item.config.attr.plain">{{item.config.text}}</Divider>
                                        </div>
                                        <!-- text -->
                                        <div v-else-if="item.configKey === 'text'">
                                          <div :style="item.config.attr.style || {padding: item.config.attr.padding + 'px',
                                          fontWeight: item.config.attr.bold ? 'bold' : 'normal',
                                          fontSize: item.config.attr.fontSize + 'px',
                                          textAlign: item.config.attr.align}">{{item.config.content}}</div>
                                        </div>
                                        <!-- alert -->
                                        <div v-else-if="item.configKey === 'alert'">
                                          <Alert :type="item.config.attr.type" :closable="item.config.attr.closable"
                                          :show-icon="item.config.attr.showIcon">
                                            {{item.config.title}}
                                            <template  slot="desc">{{item.config.content}}</template>
                                            <template  slot="close" v-if="item.config.attr.closeText">{{item.config.attr.closeText}}</template>
                                          </Alert>
                                        </div>
                                      <!-- 操作 -->
                                      <div class="tips" style="margin-top:10px;text-align:right">
                                          <a @click.stop="changeEleSlot(ri,coli,i,'left')">
                                              <Icon type="md-arrow-back" />
                                          </a>
                                          <Divider type="vertical" />
                                          <a @click.stop="changeEleSlot(ri,coli,i,'right')">
                                              <Icon type="md-arrow-forward" />
                                          </a>
                                          <Divider type="vertical" />
                                          <a @click.stop="changeEleSlot(ri,coli,i,'up')">
                                              <Icon type="md-arrow-up" />
                                          </a>
                                          <Divider type="vertical" />
                                          <a @click.stop="changeEleSlot(ri,coli,i,'down')">
                                              <Icon type="md-arrow-down" />
                                          </a>
                                          <Divider type="vertical" />
                                          <a @click.stop="delEle(eles, i)">
                                              <Icon type="md-trash" />
                                          </a>
                                      </div>
                                      <!-- 其他配置 -->
                                      <div class="tips" style="margin-top:10px;text-align:right">
                                        <Tag v-if="item.config.hide" color="warning">隐藏</Tag>
                                      </div>
                                  </Card>
                                </div>
                                <div v-else style="margin-top:10px;text-align:center">暂未选择组件</div>
                                <div class="tips" style="margin-top:10px;text-align:right">
                                  <a @click="editColStyle(ri, coli)">编辑样式</a>
                                </div>
                            </div>
                        </div>
                        <div v-else style="margin-top:10px;text-align:center">暂未新建列</div>
                    </div>
                </Form>
            </happy-scroll>
        </div>
        <!-- <div style="width:2px;background:#e8eaec;margin:0 10px"></div> -->
    </div>
    <!-- modal -->
    <!-- 选择组件的modal -->
    <Modal title="选择组件" draggable v-model="ele.flag" footer-hide>
        <div>
            <div>
                <div style="text-align:left">
                    <b>基础字段</b>
                </div>
                <div style="margin-top:10px">
                    <div style="display:flex;align-items: center;text-align:center" v-for="(list, i) in getDivList(2, baseFields)" :key="i">
                        <div class="fieldCell" style="width:100%" v-for="(item, ii) in list" :key="ii" @click="addEle(item)">
                            <span>{{item.val}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top:10px">
                <div style="text-align:left">
                    <b>扩展字段</b>
                </div>
                <div style="margin-top:10px">
                    <div style="display:flex;align-items: center;text-align:center" v-for="(list, i) in getDivList(2, moreFields)" :key="i">
                        <div class="fieldCell" style="width:100%" v-for="(item, ii) in list" :key="ii" @click="addEle(item)">
                            <span>{{item.val}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Modal>
    <!-- 列样式编辑于查看 -->
    <Modal title="列样式" draggable v-model="colStyleConfig.flag" footer-hide>
      <div style="text-align:left">
        <b>请在下方填写样式</b>
        <Input v-model="colStyle[colStyleConfig.key]" type="textarea" style="margin-top:10px"
        :autosize="{minRows: 3}" placeholder="示例=> margin:10px;color:red"/>
        <div style="text-align:right;margin-top:10px">
          <Button type="primary" @click="colStyleConfig.flag = false">确定</Button>
        </div>
      </div>
    </Modal>
    <!-- 点击表单预览 -->
    <Modal title="表单预览" v-model="preview.flag" footer-hide width="70" :mask-closable="false">
      <PREVIEW :codeShowChange="preview.flag" :formRules="formRules" :row="preview.rows" :colStyle="preview.colStyle" :formConfig="preview.form"/>
    </Modal>
    <!-- 点击表格预览 -->
    <Modal title="表格预览" v-model="preview.tableFlag" footer-hide width="70" :mask-closable="false">
      <TABLEPRE :row="preview.rows" :slotAttr="slotConfig" :codeShow="preview.tableFlag" :thFields="thFields" @saveThConfig="saveThConfig"/>
    </Modal>
    <!-- 表单数据 -->
    <Modal title="表单数据" v-model="preview.dataFlag" footer-hide width="70" :mask-closable="false">
      <FORMDATA :row="preview.rows" :formRules="formRules" :fid="fid" :slotAttr="slotConfig"
      :colStyle="preview.colStyle" :formConfig="preview.form" :thFields="thFields"/>
    </Modal>
    <!-- 表单验证 -->
    <Modal title="表单验证" v-model="preview.authFlag" footer-hide draggable :mask-closable="false">
      <FORMAUTH :row="preview.rows" :propAuth="formRules" @sendFormAuth="sendFormAuth"/>
    </Modal>
</div>
</template>

<script>
// 组件设置
import INPUT_ATTR from './ele_attr/InputAttr.vue'
import NUMBER_ATTR from './ele_attr/NumberAttr.vue'
import SELECT_ATTR from './ele_attr/SelectAttr.vue'
import TIMEATTR from './ele_attr/TimeAttr.vue'
import DATEATTR from './ele_attr/DateAttr.vue'
import SWITCHATTR from './ele_attr/SwitchAttr.vue'
import RADIOATTR from './ele_attr/RadioAttr.vue'
import CHECKBOXATTR from './ele_attr/CheckboxAttr.vue'
import BTNATTR from './more_attr/BtnAttr.vue'
import DIVIDERATTR from './more_attr/DividerAttr.vue'
import TEXTATTR from './more_attr/TextAttr.vue'
import ALERTATTR from './more_attr/AlertAttr.vue'
// 预览
import PREVIEW from './preview/PreviewView.vue'
import TABLEPRE from './preview/TableView.vue'
// 表单数据
import FORMDATA from './form_component/FormData.vue'
// 表单验证
import FORMAUTH from './form_component/FormAuth.vue'
import Vue from 'vue'
export default {
  name: 'FieldEdit',
  components: {
    INPUTATTR: INPUT_ATTR,
    NUMBERATTR: NUMBER_ATTR,
    SELECTATTR: SELECT_ATTR,
    TIMEATTR: TIMEATTR,
    DATEATTR: DATEATTR,
    SWITCHATTR: SWITCHATTR,
    RADIOATTR: RADIOATTR,
    CHECKBOXATTR: CHECKBOXATTR,
    BTNATTR: BTNATTR,
    DIVIDERATTR: DIVIDERATTR,
    TEXTATTR: TEXTATTR,
    ALERTATTR: ALERTATTR,
    PREVIEW: PREVIEW,
    TABLEPRE: TABLEPRE,
    FORMDATA: FORMDATA,
    FORMAUTH: FORMAUTH
  },
  data () {
    return {
      fid: '',
      fieldId: '',
      // 表单数据
      formInfo: {
        fromName: '',
        updateTime: '---'
      },
      // 初始化数据
      baseFields: this.lsedata.baseFields,
      moreFields: this.lsedata.moreFields,
      // 表单控制
      form: {
        lablePos: 'left',
        // 标签宽度
        labelWidth: 80,
        // 全局组件大小
        size: 'default'
      },
      // 已选择的组件渲染 rows 行子数据数组列
      rows: [],
      // 列样式
      colStyle: {},
      // 表头配置
      thFields: [],
      // 组件选择
      ele: {
        flag: false,
        // 行下标
        row: 0,
        // 列下标
        col: 0
      },
      // 组件设置
      eleConfig: {
        type: '',
        key: '',
        config: undefined
      },
      // 表单字段列
      formField: {},
      // 表单验证
      formRules: {},
      // 预览
      preview: {
        // 表单预览flag
        flag: false,
        // 表格预览flag
        tableFlag: false,
        // 数据预览flag
        dataFlag: false,
        // 表单验证flag
        authFlag: false,
        rows: [],
        form: this.form,
        colStyle: this.colStyle
      },
      // 列样式编辑
      colStyleConfig: {
        flag: false,
        key: ''
      },
      // 没有设置字段的组件
      fieldNotSetkey: [],
      // slot配置
      slotConfig: {}
    }
  },
  methods: {
    doFun (val, data) {
      let rows = this.rows
      data = this.lseutil.getGroupField(rows)
      const vm = new (Vue.extend({
        data () {
          return data
        },
        methods: {
          // eslint-disable-next-line no-new-func
          func: new Function(val)
        }
      }))()
      vm.func()
    },
    getRandNum (n) {
      let str = ''
      for (let i = 0; i < n; i++) {
        str += Math.floor(Math.random() * 10)
      }
      return str
    },
    getDivList (n, dataList) {
      let divList = this.lseutil.splitList(n, dataList)
      return divList
    },
    formSizeChange (val) {
      this.rows.forEach(row => {
        row.forEach(col => {
          col.forEach(ele => {
            ele.config.attr.size = val
          })
        })
      })
    },
    // 新建行
    addRow () {
      let row = []
      this.rows.push(row)
      this.fieldNotSetkey = []
    },
    // 新建列
    addCol (rowI) {
      let col = []
      this.rows[rowI].push(col)
      this.fieldNotSetkey = []
    },
    // 选择组件
    selectEle (row, col) {
      this.ele.row = row
      this.ele.col = col
      this.ele.flag = true
    },
    // 向内容框新增节点
    addEle (item) {
      let config = this.lseutil.objCopy(this.lsedata.formConfig[item.configKey])
      if (config.type) {
        config.type = item.type
        config.label = item.type
      }
      let eles = this.rows[this.ele.row][this.ele.col]
      config.eleType = item.configKey
      if (config.attr.size) {
        config.attr.size = this.form.size
      }
      let data = this.lseutil.objCopy(item)
      data.config = config
      // data.config.attr = this.lseutil.objCopy(config.attr)
      eles.push(data)
      this.rows[this.ele.row][this.ele.col] = eles
      this.fieldNotSetkey = []
    },
    // 删除列
    delCol (row, col) {
      let key = row + '-' + col
      delete this.colStyle[key]
      this.rows[row].splice(col, 1)
      this.eleConfig = this.lseutil.objCopy({
        type: '',
        key: '',
        config: undefined
      })
      this.fieldNotSetkey = []
    },
    // 删除行
    delRow (row) {
      this.rows.splice(row, 1)
      this.eleConfig = this.lseutil.objCopy({
        type: '',
        key: '',
        config: undefined
      })
      this.fieldNotSetkey = []
    },
    // 删除组件
    delEle (list, i) {
      list.splice(i, 1)
      this.eleConfig = this.lseutil.objCopy({
        type: '',
        key: '',
        config: undefined
      })
      this.fieldNotSetkey = []
    },
    // 设置组件唯一值
    setItemKey (item) {
      if (!item.key) {
        item.key = this.getRandNum(10)
      }
      return item.key
    },
    // 更改组件位置
    changeEleSlot (row, col, ele, type) {
      let cols = this.rows[row]
      let eles = cols[col]
      let eleNow = this.lseutil.objCopy(eles[ele])
      this.fieldNotSetkey = []
      switch (type) {
        case 'up':
          if (ele === 0) {
            return
          }
          let elePrev = this.lseutil.objCopy(eles[ele - 1])
          eles[ele] = elePrev
          eles[ele - 1] = eleNow
          this.$forceUpdate()
          break
        case 'down':
          if (ele === eles.length - 1 || ele + 1 > eles.length - 1) {
            return
          }
          let eleNext = this.lseutil.objCopy(eles[ele + 1])
          eles[ele] = eleNext
          eles[ele + 1] = eleNow
          this.$forceUpdate()
          break
        case 'left':
          if (col === 0) {
            return
          }
          let colPrev = cols[col - 1]
          colPrev.push(eleNow)
          eles.splice(ele, 1)
          // this.$forceUpdate()
          break
        case 'right':
          if (col === cols.length - 1 || col + 1 > cols.length - 1) {
            return
          }
          let colNext = cols[col + 1]
          colNext.push(eleNow)
          eles.splice(ele, 1)
          // this.$forceUpdate()
          break

        default:
          break
      }
    },
    // 调用组件设置
    setUpEle (item, key) {
      console.log(item)
      this.eleConfig.type = item.configKey
      this.eleConfig.key = key
      this.eleConfig.config = item.config
    },
    // 检测字段
    checkField (keys, item, thow) {
      if (!keys || keys.length === 0) {
        return 'ok'
      }
      if (item.field === '' || (item.config && item.config.field === '')) {
        if (thow) {
          throw new Error('检测到有未设置字段的组件')
        } else {
          return 'not'
        }
      } else if (item.field || (item.config && item.config.field)) {
        // 检测重复字段项
        let size = 0
        keys.forEach(key => {
          if (key.field && ((key.field === item.field) || (item.config && item.config.field === key.field))) {
            size++
          }
        })
        if (size > 1) {
          if (thow) {
            throw new Error('检测到有字段冲突')
          } else {
            return 'hav'
          }
        }
      }
      return 'ok'
    },
    // 编辑列样式
    editColStyle (row, col) {
      let key = row + '-' + col
      if (!this.colStyle[key]) {
        this.colStyle[key] = ''
      }
      this.colStyleConfig.key = key
      this.colStyleConfig.flag = true
    },
    // 清空
    clearRow () {
      this.rows = []
      this.colStyle = {}
      this.eleConfig = this.lseutil.objCopy({
        type: '',
        key: '',
        config: undefined
      })
    },
    // 表单预览
    previewFun () {
      let rows = this.lseutil.arrayCopy(this.rows)
      // 检查是否设置了数据库字段项
      let keys = []
      rows.forEach(row => {
        row.forEach(col => {
          col.forEach(ele => {
            keys.push({
              key: ele.key,
              field: ele.config.field
            })
          })
        })
      })
      this.fieldNotSetkey = keys
      // 检查字段重复
      try {
        keys.forEach(item => {
          this.checkField(keys, item, true)
        })
      } catch (error) {
        this.lseutil.msg({
          msg: error.message,
          type: 3
        })
        return
      }
      this.preview.rows = rows
      this.preview.form = this.lseutil.objCopy(this.form)
      this.preview.colStyle = this.lseutil.objCopy(this.colStyle)
      this.preview.flag = true
    },
    // 表格预览
    tablePreFun () {
      let rows = this.lseutil.arrayCopy(this.rows)
      // 检查是否设置了数据库字段项
      let keys = []
      rows.forEach(row => {
        row.forEach(col => {
          col.forEach(ele => {
            keys.push({
              key: ele.key,
              field: ele.config.field
            })
          })
        })
      })
      this.fieldNotSetkey = keys
      // 检查字段重复
      try {
        keys.forEach(item => {
          this.checkField(keys, item, true)
        })
      } catch (error) {
        this.lseutil.msg({
          msg: error.message,
          type: 3
        })
        return
      }
      this.preview.rows = rows
      // this.preview.form = this.lseutil.objCopy(this.form)
      // this.preview.colStyle = this.lseutil.objCopy(this.colStyle)
      this.preview.tableFlag = true
    },
    // 表单数据预览
    formDataFun () {
      let rows = this.lseutil.arrayCopy(this.rows)
      // 检查是否设置了数据库字段项
      let keys = []
      rows.forEach(row => {
        row.forEach(col => {
          col.forEach(ele => {
            keys.push({
              key: ele.key,
              field: ele.config.field
            })
          })
        })
      })
      this.fieldNotSetkey = keys
      // 检查字段重复
      try {
        keys.forEach(item => {
          this.checkField(keys, item, true)
        })
      } catch (error) {
        this.lseutil.msg({
          msg: error.message,
          type: 3
        })
        return
      }
      this.preview.rows = rows
      this.preview.form = this.lseutil.objCopy(this.form)
      this.preview.colStyle = this.lseutil.objCopy(this.colStyle)
      this.preview.dataFlag = true
    },
    // 表单数据预览
    formAuthFun () {
      let rows = this.lseutil.arrayCopy(this.rows)
      // 检查是否设置了数据库字段项
      let keys = []
      rows.forEach(row => {
        row.forEach(col => {
          col.forEach(ele => {
            keys.push({
              key: ele.key,
              field: ele.config.field
            })
          })
        })
      })
      this.fieldNotSetkey = keys
      // 检查字段重复
      try {
        keys.forEach(item => {
          this.checkField(keys, item, true)
        })
      } catch (error) {
        this.lseutil.msg({
          msg: error.message,
          type: 3
        })
        return
      }
      this.preview.rows = rows
      this.preview.authFlag = true
    },
    // 读取表单详情
    getFormInfo () {
      let load = this.lseutil.loading('正在读取表单详情', 6)
      this.lseajax.get(this.lseajax.baseurl + '/api/fromdata/getfield/' + this.fid, {
      }).then((res) => {
        load.close()
        if (res.code === 200) {
          this.formInfo = res.data.from
          if (res.data.field) {
            this.formInfo.updateTime = res.data.field.updateTime
            this.colStyle = JSON.parse(res.data.field.colStyle)
            this.form = JSON.parse(res.data.field.formAttr)
            this.rows = JSON.parse(res.data.field.field)
            let tableAttr = JSON.parse(res.data.field.tsf)
            if (tableAttr.head) {
              this.thFields = tableAttr.head
            }
            if (tableAttr.slot) {
              this.slotConfig = tableAttr.slot
            }
            this.formRules = JSON.parse(res.data.field.formRules)
          }
        } else {
          this.lseutil.notice({
            info: res.msg,
            type: 2
          })
          this.goHome()
        }
      }).catch(res => {
        load.close()
      })
    },
    // 编辑/保存配置
    ecfield () {
      let rows = this.lseutil.arrayCopy(this.rows)
      // 检查是否设置了数据库字段项
      let keys = []
      rows.forEach(row => {
        row.forEach(col => {
          col.forEach(ele => {
            keys.push({
              key: ele.key,
              field: ele.config.field
            })
          })
        })
      })
      this.fieldNotSetkey = keys
      // 检查字段重复
      try {
        keys.forEach(item => {
          this.checkField(keys, item, true)
        })
      } catch (error) {
        this.lseutil.msg({
          msg: error.message,
          type: 3
        })
        return
      }
      let load = this.lseutil.loading('正在保存', 6)
      this.lseajax.post(this.lseajax.baseurl + '/api/fromdata/ecfield', {
        fromId: this.fid,
        id: this.fieldId,
        field: JSON.stringify(this.rows),
        formAttr: JSON.stringify(this.form),
        colStyle: JSON.stringify(this.colStyle),
        tsf: JSON.stringify({
          head: this.thFields,
          slot: this.slotConfig
        }),
        formRules: JSON.stringify(this.formRules)
      }).then((res) => {
        load.close()
        this.lseutil.notice({
          info: res.msg,
          type: res.code === 200 ? 1 : 2
        })
      }).catch(res => {
        load.close()
      })
    },
    // 保存表头配置
    saveThConfig (ths, slot) {
      this.thFields = this.lseutil.arrayCopy(ths)
      this.slotConfig = this.lseutil.objCopy(slot)
      for (const key in this.slotConfig) {
        let index = this.thFields.findIndex(item => item.slot === key)
        if (index === -1) {
          delete this.slotConfig[key]
        }
      }
      this.ecfield()
    },
    // 回到首页
    goHome () {
      this.lseutil.go('froms')
    },
    // 设置表单验证
    sendFormAuth (rules, fields) {
      this.formRules = rules
      this.formField = fields
      this.ecfield()
    }
  },
  mounted () {
    let fid = this.$route.query.fid
    if (fid) {
      this.fid = fid
      this.getFormInfo()
    } else {
      this.lseutil.notice({
        info: '请选择表单',
        type: 3
      })
      setTimeout(() => {
        this.goHome()
      }, 1000)
    }
  },
  created () {
  }
}
</script>

<style scoped>

>>>.happy-scroll-container .happy-scroll-content{
  width: 100% !important;
  height: 100% !important;
}
>>>.happy-scroll-container{
  width: 100% !important;
  height: 100% !important;
}

.fieldCell{
    display:inline-block;padding:5px 10px;font-size:12px;margin:5px;
    border:1px solid #dcdee2;background:#f8f8f9;transition: all 0.5s;
    cursor: pointer;
}
.fieldCell:hover{
    border: 1px solid #2d8cf0;
    box-shadow: 0 0 5px #2d8cf0;
}
</style>
